<script setup lang="ts">
import {useRoute} from "vue-router";
import {UploadFilled} from "@element-plus/icons-vue";
import axios from "axios";
import Cookies from "js-cookie";
import {toRefs, defineProps} from "vue";
import Bus from "@/utils/bus";
import {ElMessage} from "element-plus";
const router = useRoute();
const props = defineProps({
	//子组件接收父组件传递过来的值
	questionIndex: Number,
	answerIndex: Number,
})

const {questionIndex, answerIndex} = toRefs(props);
const upload = async (params:any)=>{
	console.log(params)
	//FormData是HTML5新增的js类型，用于将数据封装成"键-值"形式，
	// 以便用于发送HTTP请求。在创建FormData对象时，可以利用JS的Blob对象来封装文件流数据：
	let formData=new FormData();
	formData.append('file',params.file);
	const res = await axios.post('/api/webstudent.exam_papers/upload', formData,{
		headers: {
			'Content-Type': 'multipart/form-data',
			'q_id': '', // 假设q_id为一个变量，表示请求头中的q_id参数
			'group_id': String(router.query.coursewareId),
			'share_id': String(router.query.shareId),
			'Authorization': Cookies.get('token'),
		}
	});
	if( res && res.data.code == 200){
		ElMessage.success('上传成功');
		Bus.emit('uploadPicture' + questionIndex?.value,{answer: location.origin + '/new_uploads/' + res.data.data.url , index: answerIndex?.value});
	} else {
		ElMessage.error('上传失败');
	}
}
</script>

<template>
	<div class="upload">
		<el-upload
			class="upload-demo"
			drag
			:http-request="upload"
			multiple
		>
			<el-icon class="el-icon--upload"><upload-filled /></el-icon>
			<div class="el-upload__text">
				Drop file here or <em>click to upload</em>
			</div>
			<template #tip>
				<div class="el-upload__tip">
					jpg/png files with a size less than 500kb
				</div>
			</template>
		</el-upload>
	</div>

</template>

<style scoped lang="scss">

</style>